<template>
  <div class="min-xz">
    <div class="wp-1100">
      <div class="user-xz">
        <div class="portrait">
          <img src="images/xz/tx-xz1.png" alt="">
        </div>
        <div class="name">
          娜E🌷預約制🦄在線
        </div>
        <div class="state">
          <span></span>可接单
        </div>
      </div>
      <div class="about-xz" style="overflow: hidden">

        <div class="col-l-xz" style="width: 33%;height: 100%;float: left">
          <el-row style="height: 100%;background-color: #ffffff;border-radius: 10px;margin-bottom: 20px;">
            <div style="width: 100%;height: 100%;text-align: center;"
                 v-if="this.details.proPicList.picUrl == ''">
              <img src="images/xz/tx-xz1.png"
                   style="width:298.56px;height:171.76px; margin-top: 150px;"
                   alt="">
            </div>
            <div style=" width: 100%;height: 100%;"
                 v-if="this.details.proPicList.picUrl!=''">
              <div style="width:100%;height:444px;border-radius: 5px">
                <img :src="mainpicUrl"
                     @error="setDefaultImage"
                     style="width:100%;height:100%;border-radius: 5px">
              </div>

              <div class="SwiperBox"
                   style=" margin-top:15px "
                   @mouseenter="MouseFun('moveIn')"
                   @mouseleave="MouseFun('moveOut')">
                <!-- 图片 -->
                <div class="imgBox"
                     style="margin: 0 5px"
                     :style="{left:`-${leftVal}px`,transition:`${ition}s`}">
                  <img @click="instFun(item,index)"
                       :src="item.picUrl"
                       v-for="(item,index) in details.proPicList"
                       :key="index"
                       :class="index === imgShow ? 'img_activeBorder' : '' "/>
                </div>
                <!-- 左箭头按钮 -->
                <div class="leftBtn"
                     @click="PrevFun"><i class="el-icon-arrow-left"></i></div>
                <!-- 右箭头按钮 -->
                <div class="rightBtn"
                     @click="NextFun"><i class="el-icon-arrow-right"
                                         style=" display: block; "></i></div>
              </div>
            </div>
            <div class="txt" style="padding-top: 20px;margin: 0 10px;">
              <div class="name" style="overflow:hidden;height: 35px">
                <div style="float: left;overflow: hidden;font-size: 18px;line-height: 35px;color: #656d84;width: 80px;">
                  名字
                </div>
                <div style="float: left;overflow: hidden;line-height: 35px;font-size: 14px;margin-right: 10px;">露娜/緣分接單
                </div>
                <div
                    style="float: left;background-color: #ef88b4;width: 44px;overflow: hidden;display: block;border-radius: 20px;margin-top: 7px;">
                  <img src="images/xz/xb.png" alt="" width="12px" height="12px"
                       style="margin-left: 5px;margin-right: 5px;">
                  <span style="font-size: 12px;color: #fff;position: relative;top:-2px;">22</span>
                </div>
              </div>
              <div class="id-xz" style="overflow: hidden;height: 35px">
                <div style="float: left;overflow: hidden;font-size: 18px;line-height: 35px;color: #656d84;width: 80px;">
                  ID
                </div>
                <div style="float: left;overflow: hidden;line-height: 35px;font-size: 14px;margin-right: 10px;">890661
                </div>
              </div>
            </div>
            <div class="txt2"
                 style="font-size: 14px;color: #777777;line-height: 1.7;padding-bottom: 20px;margin: 0 10px;">
              你我本無緣，全靠你點單 <br>
              平日早上在公司，晚上跟假日才會接單 <br>
              平日18點可以先預約 <br>
              ❌視訊❌電❤️❌外約 <br>
              有存單可以加LINE，上班不能看手機禁狂call🈲️ <br>
              在的話就會開綠燈✅ <br>
              都可以私訊詢問，問問不用錢 <br>
            </div>
            <div style="height: 2px;background-color: #f5f5f5"></div>
            <div class="fx" style="height: 50px;overflow: hidden">
              <div
                  style="line-height: 50px;float: right;font-size: 12px;margin-left: 20px;margin-right: 10px;color: rgb(119, 119, 119);">
                <img src="" alt="">
                追踪
              </div>
              <div style="line-height: 50px;float: right;font-size: 12px;color: rgb(119, 119, 119);">
                <img src="" alt="">
                分享
              </div>
            </div>

          </el-row>
          <!--            打赏模块-->

          <el-row style="width: 360px;height: 100%;background-color: #ffffff;border-radius: 10px;margin-bottom: 20px;">
            <el-tabs v-model="activeName" @tab-click="handleClick" style="padding: 0 20px">
              <el-tab-pane label="礼物榜" name="first">
                <ul>
                  <li style="overflow: hidden;height: 50px">
                    <div style="float: left;line-height: 50px;color: #f5c445;margin-left: 10px;">1</div>
                    <div class="portrait" style="float: left;  float: left;
  width: 33px;
  height: 33px;
  border: 3px solid #ffffff;
  border-radius: 50%;
line-height: 50px;
margin-top: 6px;
margin-left: 10px;
margin-right: 10px;">
                      <img src="images/xz/tx-xz1.png" alt="">
                    </div>
                    <div style="float: left;line-height: 50px;font-size: 14px;">吟叢</div>
                    <div style="float: right;line-height: 50px;font-size: 14px;
padding-right: 10px;
">
                      7711
                      <img src="images/xz/zs.png" alt=""
                           style="width: 16px;height: 16px;position: relative;top: 3px;margin-left: 10px;">
                    </div>
                  </li>
                  <li style="overflow: hidden;height: 50px">
                    <div style="float: left;line-height: 50px;color: #94ccfa;margin-left: 10px;">2</div>
                    <div class="portrait" style="float: left;  float: left;
  width: 33px;
  height: 33px;
  border: 3px solid #ffffff;
  border-radius: 50%;
line-height: 50px;
margin-top: 6px;
margin-left: 10px;
margin-right: 10px;">
                      <img src="images/xz/tx-xz1.png" alt="">
                    </div>
                    <div style="float: left;line-height: 50px;font-size: 14px;">吟叢</div>
                    <div style="float: right;line-height: 50px;font-size: 14px;
padding-right: 10px;
">
                      7711
                      <img src="images/xz/zs.png" alt=""
                           style="width: 16px;height: 16px;position: relative;top: 3px;margin-left: 10px;">
                    </div>
                  </li>
                  <li style="overflow: hidden;height: 50px">
                    <div style="float: left;line-height: 50px;color: #ef9a4c;margin-left: 10px;">3</div>
                    <div class="portrait" style="float: left;  float: left;
  width: 33px;
  height: 33px;
  border: 3px solid #ffffff;
  border-radius: 50%;
line-height: 50px;
margin-top: 6px;
margin-left: 10px;
margin-right: 10px;">
                      <img src="images/xz/tx-xz1.png" alt="">
                    </div>
                    <div style="float: left;line-height: 50px;font-size: 14px;">吟叢</div>
                    <div style="float: right;line-height: 50px;font-size: 14px;
padding-right: 10px;
">
                      7711
                      <img src="images/xz/zs.png" alt=""
                           style="width: 16px;height: 16px;position: relative;top: 3px;margin-left: 10px;">
                    </div>
                  </li>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="下单榜" name="second">
                <!--选项卡-->
              </el-tab-pane>
            </el-tabs>
          </el-row>
          <!--        礼物榜-->

          <el-row style="width: 360px;height: 100%;background-color: #ffffff;border-radius: 10px;margin-bottom: 20px;">
            <div class="title-xz12">
              <div class="a1">礼物榜</div>
              <div class="a2">详情</div>
            </div>
            <ul style="overflow: hidden" class="xz-lw">
              <li style="float: left;width: 25%">
                <div class="con">
                  <div class="pic">
                    <img style="width: 100%" src="images/xz/lw-xz1.png" alt="">
                  </div>
                  <div class="desc">
                    x13
                  </div>
                </div>
              </li>
              <li style="float: left;width: 25%">
                <div class="con">
                  <div class="pic">
                    <img style="width: 100%" src="images/xz/lw-xz1.png" alt="">
                  </div>
                  <div class="desc">
                    x13
                  </div>
                </div>
              </li>
              <li style="float: left;width: 25%">
                <div class="con">
                  <div class="pic">
                    <img style="width: 100%" src="images/xz/lw-xz1.png" alt="">
                  </div>
                  <div class="desc">
                    x13
                  </div>
                </div>
              </li>
              <li style="float: left;width: 25%">
                <div class="con">
                  <div class="pic">
                    <img style="width: 100%" src="images/xz/lw-xz1.png" alt="">
                  </div>
                  <div class="desc">
                    x13
                  </div>
                </div>
              </li>
            </ul>
            <div class="d1" style="padding: 10px;">
              <div style="text-align: right;font-size: 13px;color: #636d86;">
                <img src="images/xz/xslw-xz1.png" alt=""
                     style="overflow: hidden;width: 18px;height: 18px;position: relative;top: 3px;margin-right: 5px">
                赠送礼物
              </div>
            </div>


          </el-row>
        </div>
        <div class="col-r" style="width: 65%;float: right;overflow: hidden;">
          <template>
            <el-tabs v-model="activeName2" @tab-click="handleClick">
              <el-tab-pane class="cscscs" label="动态" name="first">动态</el-tab-pane>
              <el-tab-pane class="cscscs" label="英雄联盟" name="second">
                <ul class="ul-list-xz10">
                  <li class="on">
                    <div>標準模式200幣/局</div>
                  </li>
                  <li>
                    <div>不限模式300幣/局</div>
                  </li>
                  <li>
                    <div>aram模式200幣/局</div>
                  </li>
                  <li>
                    <div>弹性模式200幣/局</div>
                  </li>
                  <li>
                    <div>AG模式200幣/局</div>
                  </li>
                </ul>
                <el-row style="width: 200px;margin-bottom: 10px;">
                  <el-col :span="12">
                    <div class="grid-content bg-purple" style="font-size: 24px;
color: #ee864a;font-weight: bold;">180幣<span style="font-size: 16px;">/局</span></div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple-light" style="font-size: 12px;text-decoration: line-through;color: #777777;
margin-top: 13px;">200幣/局
                    </div>
                  </el-col>
                </el-row>
                <div>
                  <div
                      style="margin-bottom:10px; font-size: 13px;height:24px;background: rgba(254,127,56,.15);color: #ee864a;border-radius: 5px;display:inline-block;padding: 0 5px;line-height: 24px;">
                    新人優惠券減20
                  </div>
                  <div style="color: #636d86;margin-bottom: 10px;">接单数量<span
                      style="margin-left: 12px;color: #000;font-size: 12px;">328</span></div>
                  <div style="color: #636d86;">用户评价<span
                      style="margin-left: 12px;color: #000;font-size: 12px;">40</span></div>
                </div>
                <div style="overflow: hidden;margin-top: 20px;">
                  <div
                      style="font-weight: bold; width: 140px;height: 50px;text-align: center;float: left;margin-right: 20px;background: #fed838;line-height: 50px;border-radius: 40px;">
                    聊一聊
                  </div>
                  <div
                      style="font-weight: bold; width: 140px;height: 50px;text-align: center;float: left;background: #fed838;line-height: 50px;border-radius: 40px;">
                    立即下单
                  </div>
                </div>
                <div style="margin-top: 20px;">
                  <div style="font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #8c94aa;
    margin-bottom: 10px;">技能咨询
                  </div>
                  <VoiceComponent :audioUrl="voiceContent[0].audioUrl"/>
                  <div style="font-size: 16px;line-height: 26px;margin-top: 10px;color: #222c43;margin-bottom: 45px;">
                    主打輔助副AD🌸<br>
                    很少很少打中路 <br>
                    超過10分鐘記得補單๑⃙⃘´༥`๑⃙⃘
                  </div>
                </div>
                <div>
                  <span style="display: inline-block;
    width: 60px;
    margin-right: 12px;
    color: #636d86;
font-size: 15px;">段位</span>
                  <span style="color: #222c43;font-size: 15px;">白金</span>
                </div>
                <div style="padding: 10px 0;">
                  <div>
                    <img src="images/xz/pw-xz22.jpeg" alt="" style="width: 80%;height: 100%">
                  </div>
                </div>
                <!--                数据表格-->
                <div data-v-7875003b="" class="score-box" style="display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 28px;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    text-align: center;
    height: 99px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #000;
    background: #f5f6f8;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-top: 40px;
    margin-bottom: 36px;">
                  <div data-v-7875003b="" style="-webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    border-right: 1px solid #e8eaee;">
                    <div data-v-7875003b="" style="font-weight: 500;">
                      49%
                    </div>
                    <div data-v-7875003b="" class="cn" style="font-size: 17px;
    color: #8c94aa;
    margin-top: 14px;">好評率
                    </div>
                  </div>
                  <div data-v-7875003b="" style="-webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    border-right: 1px solid #e8eaee;">
                    <div data-v-7875003b="" style="font-weight: 500;">
                      49%
                    </div>
                    <div data-v-7875003b="" class="cn" style="font-size: 17px;
    color: #8c94aa;
    margin-top: 14px;">好評率
                    </div>
                  </div>
                  <div data-v-7875003b="" style="-webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    border-right: 1px solid #e8eaee;">
                    <div data-v-7875003b="" style="font-weight: 500;">
                      49%
                    </div>
                    <div data-v-7875003b="" class="cn" style="font-size: 17px;
    color: #8c94aa;
    margin-top: 14px;">好評率
                    </div>
                  </div>
                  <div data-v-7875003b="" style="-webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    border-right: 1px solid #e8eaee;">
                    <div data-v-7875003b="" style="font-weight: 500;">
                      49%
                    </div>
                    <div data-v-7875003b="" class="cn" style="font-size: 17px;
    color: #8c94aa;
    margin-top: 14px;">好評率
                    </div>
                  </div>
                </div>
                <!--                结束-->
                <div data-v-ace01cf8="" data-v-27cc69d4="" class="comment-list">
                  <div data-v-ace01cf8="" class="detail-title"><span data-v-ace01cf8="">評分及評價<span data-v-ace01cf8="">
        (390)</span></span>
                    <div data-v-ace01cf8="" class="star-count"><span data-v-ace01cf8="">5.0</span>
                      <div data-v-3d6499a2="" data-v-ace01cf8="" class="star-wrap">
                        <div data-v-3d6499a2="" class="one-star" style="width: 15px; height: 15px; margin-right: 4px;">
                          <i data-v-3d6499a2="" class="star fps-icon fps-icon-star1"
                             style="font-style: normal; font-size: 15px; color: rgb(247, 181, 0); line-height: 1;"></i>
                        </div>
                        <div data-v-3d6499a2="" class="one-star" style="width: 15px; height: 15px; margin-right: 4px;">
                          <i data-v-3d6499a2="" class="star fps-icon fps-icon-star1"
                             style="font-style: normal; font-size: 15px; color: rgb(247, 181, 0); line-height: 1;"></i>
                        </div>
                        <div data-v-3d6499a2="" class="one-star" style="width: 15px; height: 15px; margin-right: 4px;">
                          <i data-v-3d6499a2="" class="star fps-icon fps-icon-star1"
                             style="font-style: normal; font-size: 15px; color: rgb(247, 181, 0); line-height: 1;"></i>
                        </div>
                        <div data-v-3d6499a2="" class="one-star" style="width: 15px; height: 15px; margin-right: 4px;">
                          <i data-v-3d6499a2="" class="star fps-icon fps-icon-star1"
                             style="font-style: normal; font-size: 15px; color: rgb(247, 181, 0); line-height: 1;"></i>
                        </div>
                        <div data-v-3d6499a2="" class="one-star" style="width: 15px; height: 15px;"><i
                            data-v-3d6499a2="" class="star fps-icon fps-icon-star1"
                            style="font-style: normal; font-size: 15px; color: rgb(247, 181, 0); line-height: 1;"></i>
                        </div> <!----> </div>
                    </div>
                  </div>
                  <div data-v-ace01cf8="" class="comment-cate">
                    <div data-v-ace01cf8="" class="one-comment-cate">
                      聲音好聽<span data-v-ace01cf8="" class="count">(153)</span></div>
                    <div data-v-ace01cf8="" class="one-comment-cate">
                      好聊不尬<span data-v-ace01cf8="" class="count">(146)</span></div>
                    <div data-v-ace01cf8="" class="one-comment-cate">
                      輔助天才<span data-v-ace01cf8="" class="count">(103)</span></div>
                    <div data-v-ace01cf8="" class="one-comment-cate">
                      中單制霸<span data-v-ace01cf8="" class="count">(31)</span></div>
                    <div data-v-ace01cf8="" class="one-comment-cate">
                      上單超神<span data-v-ace01cf8="" class="count">(26)</span></div>
                    <div data-v-ace01cf8="" class="one-comment-cate">
                      打野帶飛<span data-v-ace01cf8="" class="count">(25)</span></div>
                    <div data-v-ace01cf8="" class="one-comment-cate">
                      AD Carry<span data-v-ace01cf8="" class="count">(11)</span></div>
                    <div data-v-ace01cf8="" class="one-comment-cate">
                      神乎其技<span data-v-ace01cf8="" class="count">(6)</span></div>
                  </div>
                  <div data-v-ace01cf8="" class="comment-list-wrap">
                    <div data-v-ace01cf8="" class="one-comment">
                      <div data-v-64463dc6="" data-v-ace01cf8="" class="border-wrap comment-avatar"
                           style="transform: scale(1);">
                        <div data-v-08e573c5="" data-v-ace01cf8="" class="fps-avatar-wrap pointer" data-v-64463dc6="">
                          <div data-v-08e573c5="" class="avatar-wrap"><img data-v-08e573c5=""
                                                                           src="images/xz/tx-xz1001.webp"
                                                                           class="img" style="opacity: 1;"></div>
                          <!----></div>
                        <img data-v-64463dc6=""
                             src="images/xz/txb.png"
                             class="border-img" style="width: 122.8%; height: auto;"></div>
                      <div data-v-ace01cf8="" class="info-wrap">
                        <div data-v-ace01cf8="" class="nickname pointer">
                          維維。🌸
                          <span data-v-ace01cf8="" class="userlevel-tag level-mg level-3"></span> <!----></div>
                        <div data-v-ace01cf8="" class="comment-time">
                          2023-10-08
                        </div>
                        <div data-v-ace01cf8="" class="comment-content"><img data-v-ace01cf8=""
                                                                             src="images/xz/pl-xz2.png"
                                                                             class="good-comment">
                          多了一個永遠守護妳的輔助，還不下單嗎?
                        </div>
                        <div data-v-ace01cf8="" class="tags-list-wrap"><i data-v-ace01cf8=""
                                                                          class="fps-icon fps-icon-tag"
                                                                          style="font-style: normal; font-size: 10px; line-height: 1;"></i>
                          輔助天才，摘星達人，聲音好聽
                        </div> <!----> <!----> <!----></div>
                      <div data-v-3d6499a2="" data-v-ace01cf8="" class="star-wrap comment-star">
                        <div data-v-3d6499a2="" class="one-star" style="width: 10px; height: 10px; margin-right: 4px;">
                          <i data-v-3d6499a2="" class="star fps-icon fps-icon-star1"
                             style="font-style: normal; font-size: 10px; color: rgb(247, 181, 0); line-height: 1;"></i>
                        </div>
                        <div data-v-3d6499a2="" class="one-star" style="width: 10px; height: 10px; margin-right: 4px;">
                          <i data-v-3d6499a2="" class="star fps-icon fps-icon-star1"
                             style="font-style: normal; font-size: 10px; color: rgb(247, 181, 0); line-height: 1;"></i>
                        </div>
                        <div data-v-3d6499a2="" class="one-star" style="width: 10px; height: 10px; margin-right: 4px;">
                          <i data-v-3d6499a2="" class="star fps-icon fps-icon-star1"
                             style="font-style: normal; font-size: 10px; color: rgb(247, 181, 0); line-height: 1;"></i>
                        </div>
                        <div data-v-3d6499a2="" class="one-star" style="width: 10px; height: 10px; margin-right: 4px;">
                          <i data-v-3d6499a2="" class="star fps-icon fps-icon-star1"
                             style="font-style: normal; font-size: 10px; color: rgb(247, 181, 0); line-height: 1;"></i>
                        </div>
                        <div data-v-3d6499a2="" class="one-star" style="width: 10px; height: 10px;"><i
                            data-v-3d6499a2="" class="star fps-icon fps-icon-star1"
                            style="font-style: normal; font-size: 10px; color: rgb(247, 181, 0); line-height: 1;"></i>
                        </div> <!----> </div>
                    </div>
                    <div data-v-ace01cf8="" class="one-comment">
                      <div data-v-64463dc6="" data-v-ace01cf8="" class="border-wrap comment-avatar"
                           style="transform: scale(1);">
                        <div data-v-08e573c5="" data-v-ace01cf8="" class="fps-avatar-wrap pointer" data-v-64463dc6="">
                          <div data-v-08e573c5="" class="avatar-wrap"><img data-v-08e573c5=""
                                                                           src="images/xz/tx-xz1001.webp"
                                                                           class="img-xz" style="opacity: 1;"></div>
                          <!----></div>
                        <img data-v-64463dc6=""
                             src="images/xz/txb.png"
                             class="border-img" style="width: 122.8%; height: auto;"></div>
                      <div data-v-ace01cf8="" class="info-wrap">
                        <div data-v-ace01cf8="" class="nickname pointer">
                          維維。🌸
                          <span data-v-ace01cf8="" class="userlevel-tag level-mg level-3"></span> <!----></div>
                        <div data-v-ace01cf8="" class="comment-time">
                          2023-10-06
                        </div>
                        <div data-v-ace01cf8="" class="comment-content"><img data-v-ace01cf8=""
                                                                             src="images/xz/pl-xz2.png"
                                                                             class="good-comment">
                          聲音很好聽很Q 罵對面很帶勁 很可愛的小姊姊&lt;3
                        </div>
                        <div data-v-ace01cf8="" class="tags-list-wrap"><i data-v-ace01cf8=""
                                                                          class="fps-icon fps-icon-tag"
                                                                          style="font-style: normal; font-size: 10px; line-height: 1;"></i>
                          輔助天才，聲音好聽，好聊不尬
                        </div> <!----> <!----> <!----></div>
                      <div data-v-3d6499a2="" data-v-ace01cf8="" class="star-wrap comment-star">
                        <div data-v-3d6499a2="" class="one-star" style="width: 10px; height: 10px; margin-right: 4px;">
                          <i data-v-3d6499a2="" class="star fps-icon fps-icon-star1"
                             style="font-style: normal; font-size: 10px; color: rgb(247, 181, 0); line-height: 1;"></i>
                        </div>
                        <div data-v-3d6499a2="" class="one-star" style="width: 10px; height: 10px; margin-right: 4px;">
                          <i data-v-3d6499a2="" class="star fps-icon fps-icon-star1"
                             style="font-style: normal; font-size: 10px; color: rgb(247, 181, 0); line-height: 1;"></i>
                        </div>
                        <div data-v-3d6499a2="" class="one-star" style="width: 10px; height: 10px; margin-right: 4px;">
                          <i data-v-3d6499a2="" class="star fps-icon fps-icon-star1"
                             style="font-style: normal; font-size: 10px; color: rgb(247, 181, 0); line-height: 1;"></i>
                        </div>
                        <div data-v-3d6499a2="" class="one-star" style="width: 10px; height: 10px; margin-right: 4px;">
                          <i data-v-3d6499a2="" class="star fps-icon fps-icon-star1"
                             style="font-style: normal; font-size: 10px; color: rgb(247, 181, 0); line-height: 1;"></i>
                        </div>
                        <div data-v-3d6499a2="" class="one-star" style="width: 10px; height: 10px;"><i
                            data-v-3d6499a2="" class="star fps-icon fps-icon-star1"
                            style="font-style: normal; font-size: 10px; color: rgb(247, 181, 0); line-height: 1;"></i>
                        </div> <!----> </div>
                    </div>
                    <div data-v-ace01cf8="" class="get-more-comment pointer"><span data-v-ace01cf8="">查看更多</span></div>
                  </div>
                </div>

              </el-tab-pane>
              <el-tab-pane class="cscscs" label="小闹钟" name="third">小闹钟</el-tab-pane>
              <el-tab-pane class="cscscs" label="王者荣耀" name="fourth">王者荣耀</el-tab-pane>
            </el-tabs>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VoiceComponent from "./VoiceComponent.vue"; // 导入 VoiceComponent 组件
export default {
  name: "DetailView",
  components: {VoiceComponent},
  data() {
    return {
      voiceContent: [
        {id: "1", audioUrl: "images/indeximgs/audio.mp3"},
        {id: "2", audioUrl: "images/indeximgs/audio1.mp3"},
        {id: "3", audioUrl: "images/indeximgs/audio2.mp3"},
        // 添加更多的语音内容
      ],
      activeName2: 'second',
      activeName: 'first',
      details: {
        //照片
        proPicList: [
          {
            id: "",//id
            projectId: "",//所属标的项目
            picUrl: "images/xz/tx-xz1.png",//图片地址
            picSize: null,//图片打小
            picTitle: "",//图片标题
            picType: null,//图片类型
            picState: null,//图片状态
          },
          {
            id: "",//id
            projectId: "",//所属标的项目
            picUrl: "images/xz/lb-xz2.png",//图片地址
            picSize: null,//图片打小
            picTitle: "",//图片标题
            picType: null,//图片类型
            picState: null,//图片状态
          },
          {
            id: "",//id
            projectId: "",//所属标的项目
            picUrl: "images/xz/lb-xz1.png",//图片地址
            picSize: null,//图片打小
            picTitle: "",//图片标题
            picType: null,//图片类型
            picState: null,//图片状态
          },
          {
            id: "",//id
            projectId: "",//所属标的项目
            picUrl: "images/xz/lb-xz1.png",//图片地址
            picSize: null,//图片打小
            picTitle: "",//图片标题
            picType: null,//图片类型
            picState: null,//图片状态
          },
          {
            id: "",//id
            projectId: "",//所属标的项目
            picUrl: "images/xz/lb-xz1.png",//图片地址
            picSize: null,//图片打小
            picTitle: "",//图片标题
            picType: null,//图片类型
            picState: null,//图片状态
          }, {
            id: "",//id
            projectId: "",//所属标的项目
            picUrl: "images/xz/lb-xz1.png",//图片地址
            picSize: null,//图片打小
            picTitle: "",//图片标题
            picType: null,//图片类型
            picState: null,//图片状态
          }
        ],
      },
      mainpicUrl: '',
      leftVal: 0,  // 轮播图盒子的偏移值
      flag: true, // 用来节流防止重复点击
      start: null, // 自动执行下一张定的时器
      imgWidth: 200,  // 在这里填写你需要的图片宽度
      ition: 0.8, // 设置轮播图过度时间
      imgShow: 0, // 表示当前显示的图片索引

    }
  },
  methods: {
    setDefaultImage(e) {
      e.target.src = defaultImage
    },
// 轮播图
    // 这里定义一个鼠标移入移出事件，鼠标悬停时停止自动轮播，鼠标移出则重新执行自动轮播
    // MouseFun (type) {// 停止定时器            // 重新执行定时器
    //   type == 'moveIn' ? clearTimeout(this.start) : this.carousel()
    // },
    // 此为自动轮播定时器
    // carousel () {
    //   this.start = setInterval(() => {
    //     this.NextFun()
    //   }, 1000)
    // },
    // 这里通过额外封装的节流函数触发 PrevFun() 和 NextFun(),以达到防止重复点击的效果
    // throttle (fun) {
    //   if (this.flag) {
    //     this.flag = false;
    //     fun(); // 此为模板中传递进来的PrevFun()或NextFun()函数
    //     setTimeout(() => {
    //       this.flag = true;
    //     }, 1200); // 节流间隔时间
    //   }
    // },
    // 上一张
    PrevFun() {
      let i = this.imgShow
      if (this.imgShow == 0) { // 判断显示的图片 是 第一张时执行
        // this.details.proPicList.length是指循环图片数组的图片个数
        this.ition = 0 // 将过渡时间变成0，瞬间位移到最后一张图
        this.imgShow = this.details.proPicList.length - 1 // 将图片改为最后一张图
        this.leftVal = (this.details.proPicList.length - 4) * this.imgWidth // 瞬间移动
        this.mainpicUrl = this.details.proPicList[i].picUrl
        setTimeout(() => {  // 通过延时障眼法,归原过渡时间,执行真正的“上一张”函数
          this.ition = 0
          this.leftVal -= this.imgWidth
        }, 1000)
      } else { // 判断显示的图片 不是 第一张时执行
        this.ition = 0.8
        this.leftVal -= this.imgWidth
        this.imgShow--
        this.mainpicUrl = this.details.proPicList[i].picUrl
      }
    },
    // 下一张
    NextFun() {
      let i = this.imgShow
      if (this.details.proPicList.length <= 4) {
        this.ition = 0.8
        this.leftVal = 0
        this.imgShow++
        this.mainpicUrl = this.details.proPicList[i].picUrl
        if (this.imgShow >= this.details.proPicList.length) {
          this.ition = 0.8
          this.leftVal = 0
          this.imgShow = 0
          this.mainpicUrl = this.details.proPicList[i].picUrl
          setTimeout(() => {
            this.ition = 0
            this.leftVal = 0
          }, 0)
        }
      } else if (this.imgShow <= 2 || this.details.proPicList.length - 1 < this.imgShow > this.details.proPicList.length - 4) {
        this.ition = 0.8
        this.leftVal = 0
        this.imgShow++
        this.mainpicUrl = this.details.proPicList[i].picUrl
        if (this.imgShow > this.details.proPicList.length - 1) {
          if (this.imgShow == this.details.proPicList.length - 1) { // 判断显示的图片 是 最后一张时执行
            this.ition = 0.8
            this.leftVal = 0
            this.imgShow = 0
            this.mainpicUrl = this.details.proPicList[i].picUrl
            setTimeout(() => {
              this.ition = 0
              this.leftVal = 0
            }, 0)
          } else { // 判断显示的图片 不是 最后一张时执行
            this.ition = 0.8
            this.leftVal += this.imgWidth
            this.imgShow++
            this.mainpicUrl = this.details.proPicList[i].picUrl
          }

        }
      } else if (this.imgShow > 2 || this.imgShow < this.details.proPicList.length - 3) {
        if (this.leftVal == (this.details.proPicList.length - 4) * this.imgWidth) { // 判断显示的图片 是 最后一张时执行
          this.ition = 0.8
          this.leftVal + this.imgWidth
          this.imgShow = 0
          this.mainpicUrl = this.details.proPicList[i].picUrl
          setTimeout(() => {
            this.ition = 0
            this.leftVal = 0
          }, 0)
          this.mainpicUrl = this.details.proPicList[i].picUrl
        } else { // 判断显示的图片 不是 最后一张时执行
          this.ition = 0.8
          this.leftVal += this.imgWidth
          this.imgShow++
          this.mainpicUrl = this.details.proPicList[i].picUrl
        }
      }

    },
    // 点击 图片
    instFun(item, index) {
      if (this.imgShow <= 1) {
        this.ition = 0.8
        this.leftVal = this.leftVal
      } else if (this.imgShow = this.details.proPicList.length - 1) {
        this.ition = 0.8
        this.leftVal = this.leftVal
      } else {
        this.ition = 0.8
        this.leftVal += this.imgWidth
      }
      this.imgShow = index
      this.mainpicUrl = item.picUrl
      console.log(this.imgShow)
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }

  },
}

</script>

<style scoped>
li {
  list-style-type: none;
}

ul {
  margin: 0;
  padding: 0;
}

.wp-1100 {
  width: 1100px;
  margin: 0 auto;
}

.user-xz {
  overflow: hidden;
  height: 60px;
}

.user-xz .portrait {
  float: left;

  width: 33px;
  height: 33px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  margin-right: 15px;
  margin-top: 15px;
}

.user-xz .portrait img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.user-xz .name {
  overflow: hidden;
  font-size: 21px;
  float: left;
  line-height: 60px;
  margin-right: 30px;
}

.user-xz .state {
  overflow: hidden;
  float: left;
  line-height: 60px;
  color: #656d84;
  font-size: 14px;
}

.user-xz .state span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #7ad559;
  position: relative;
  top: -1px;
  margin-right: 10px;
}


.img_activeBorder {
  border: 4px solid #409eff;
}

/* 图片容器样式 */
.SwiperBox {
  position: relative;
  width: 100%;
  height: 71px;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
}

.imgBox {
  position: absolute;
  top: 0px;
  left: 0px;
  min-width: 200px;
  height: 150px;
  display: flex;
  justify-content: flex-start;
}

/* 图片默认样式 */
.imgBox img {
  flex-shrink: 0;
  width: 66px;
  height: 66px;
  margin: 2px;
}

/* 两个按钮共有的样式,也可直接使用箭头图片替代 */
.leftBtn, .rightBtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(109, 109, 109, 0.445);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}

.leftBtn {
  left: 10px;
}

.rightBtn {
  right: 10px;
}

.inst:last-child {
  margin-right: 0px;
}

.about-xz {
  overflow: hidden;
}

.el-tabs__nav-wrap ::after {
  display: none;
}

.el-tabs__nav-wrap::after {
  display: none;
}


.portrait img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.xz-lw {
  padding-bottom: 20px;
  border-bottom: 2px solid #f9f9f9;
}

.xz-lw .pic {
  width: 60px;
  height: 65px;
  text-align: center;
}

.title-xz12 {
  overflow: hidden;
  height: 20px;
  line-height: 20px;
  padding: 10px 20px;
}

.title-xz12 .a1 {
  font-size: 18px;
}

.title-xz12 .a2 {
  font-size: 16px;
  color: rgb(119, 119, 119);
}

.xz-lw .con {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.xz-lw .pic {
  margin-bottom: 10px;
}

.xz-lw .desc {
  width: 35px;
  height: 18px;
  line-height: 18px;
  font-size: 12px;
  text-align: center;
  background-color: #eca34d;
  color: #ffffff;
  border-radius: 40px;
  margin-bottom: 5px;
}

.title-xz12 .a1 {
  font-size: 18px;
  float: left;
}

.title-xz12 .a2 {
  float: right;
  overflow: hidden;
}

.ul-list-xz10 {
  overflow: hidden;
}

.ul-list-xz10 li {


  margin-right: 20px;
  margin-bottom: 10px;
  float: left;


}

.ul-list-xz10 li div {
  font-size: 13px;
  text-align: center;
  line-height: 28px;
  height: 28px;
  width: 125px;
  border: 1px solid #777777;
  border-radius: 5px;
}

.ul-list-xz10 .on div {
  border: 1px solid #f8d95a;
}

/*评论模块*/
.comment-list[data-v-ace01cf8] {
  padding: 0 16px 32px;
}
.comment-list .detail-title[data-v-ace01cf8] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: 500;
  font-size: 17px;
  color: #8c94aa;
}
.comment-list .detail-title .star-count[data-v-ace01cf8] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.comment-list .detail-title .star-count span[data-v-ace01cf8] {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: #636d86;
  margin-right: 8px;
}

.star-wrap[data-v-3d6499a2] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 0;
}
.star-wrap .one-star[data-v-3d6499a2] {
  position: relative;
}
.star-wrap .one-star .star[data-v-3d6499a2] {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.fps-icon {
  font-family: fps-icon!important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fps-icon-star1:before {
  content: "\E655";
}
.fps-icon {
  font-family: fps-icon!important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.comment-list .comment-cate[data-v-ace01cf8] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -moz-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 6px;
}
.comment-list .comment-cate .one-comment-cate[data-v-ace01cf8] {
  margin: 8px 8px 0 0;
  padding: 4px 8px;
  border: 1px solid rgba(140,148,170,.3);
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  font-size: 15px;
  line-height: 24px;
  color: #222c43;
  cursor: default;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.comment-list .comment-cate .one-comment-cate span[data-v-ace01cf8] {
  margin-left: 6px;
}
.comment-list-wrap[data-v-ace01cf8] {
  padding: 0 8px;
}
.comment-list-wrap[data-v-ace01cf8] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 12px;
}

.comment-list-wrap .one-comment[data-v-ace01cf8] {
  margin-top: 12px;
  padding: 16px 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -moz-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  position: relative;
}
.comment-list-wrap .one-comment .comment-avatar[data-v-ace01cf8] {
  width: 50px;
  height: 50px;
  margin-right: 20px;
}
.border-wrap[data-v-64463dc6] {
  width: 100%;
  height: 100%;
  position: relative;
}
.fps-avatar-wrap[data-v-08e573c5] {
  position: relative;
  width: 100%;
  height: auto;
}
.pointer {
  cursor: pointer;
}
.avatar-wrap[data-v-08e573c5] {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 0;
  padding-top: 100%;
}
.avatar-wrap img[data-v-08e573c5] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity .2s;
  -o-transition: opacity .2s;
  -moz-transition: opacity .2s;
  transition: opacity .2s;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
}
.comment-list-wrap .one-comment .info-wrap[data-v-ace01cf8] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -moz-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.comment-list-wrap .one-comment .info-wrap .nickname[data-v-ace01cf8] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  color: #222c43;
}

.pointer {
  cursor: pointer;
}

.level-mg[data-v-ace01cf8] {
  margin-left: 2px;
}
.level-mg {
  margin-left: 2px;
}
.userlevel-tag {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 38px;
  height: 18px;
  overflow: hidden;
}
.userlevel-tag.level-3:before {
  top: -200%;
}

.userlevel-tag:before {
  content: "";
  position: relative;
  display: block;
  width: 100%;
  height: 1430%;
  /*background-image: url(../../static/img/user-levels.fb0def88.png);*/
  background-position-x: 0;
  background-repeat: no-repeat;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  background-size: auto 100%;
}

.comment-list-wrap .one-comment .info-wrap .comment-time[data-v-ace01cf8] {
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  color: rgba(99,109,134,.5);
  margin-top: 2px;
}
.comment-list-wrap .one-comment .info-wrap .comment-content[data-v-ace01cf8] {
  position: relative;
  width: 100%;
  margin-top: 16px;
  font-size: 15px;
  line-height: 22px;
  color: #222c43;
  word-break: break-all;
}
.comment-list-wrap .one-comment .info-wrap .comment-content .good-comment[data-v-ace01cf8] {
  position: absolute;
  width: 30px;
  right: 0;
  top: -20px;
}
.comment-list-wrap .one-comment .info-wrap .tags-list-wrap[data-v-ace01cf8] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 8px;
  padding: 3.5px 8px;
  background: #f1f4f6;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  font-size: 12px;
  line-height: 17px;
  letter-spacing: -.000319808px;
  color: #8c94aa;
}
.fps-icon {
  font-family: fps-icon!important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fps-icon-tag:before {
  content: "\E65B";
}
.comment-list-wrap .get-more-comment[data-v-ace01cf8] {
  border: 1px solid #e8eaee;
}

.comment-list-wrap .get-more-comment[data-v-ace01cf8], .comment-list-wrap .no-more-comment[data-v-ace01cf8] {
  margin: 24px auto 0;
  width: 116px;
  height: 36px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -.000319808px;
  color: #636d86;
}
.pointer {
  cursor: pointer;
}
.avatar-wrap[data-v-08e573c5] {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 0;
  padding-top: 100%;
}
.border-wrap .border-img[data-v-64463dc6] {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  pointer-events: none;
}

/**/

</style>